<template>
    <div class="welcome">
        <div class="navbar">
            <div class="nav-wrap-left"><span class="xdown"></span>广州</div>
            <input type="text" class="nav-search"></input>
            <div class="nav-wrap-right" @click="myorder"><div class="myicon"><div class="topra"></div>
            <div class="bottomra"></div></div>我的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <img src="../assets/images/advertisement.jpg" class="advertisement">
        <div class="head">
            <div>
                <h4>我们约吧</h4>
                <p>恋人家人好朋友</p>
                <img src="../assets/images/fe4d2e89827aa829e12e2557ded363a112289.png" >
            </div>
            <div>
             <h4>低价超值</h4>
                <p>十元惠生活</p>
                <img src="../assets/images/a06d0c5c0a972e784345b2d648b034ec9710.jpg" >
            </div>
            <div>
             <h4>聚餐宴请</h4>
                <p>朋友家人常聚聚</p>
                <img src="../assets/images/08615b8ae15d03c44cc5eb9bda381cb212714.png" >
            </div>
        </div>

        <div class="comlist">
            <div class="comtitle">猜你喜欢</div>
            <router-link to="/detail">
                <div class="content-list">
                    <img src="../assets/images/tea3.jpg">
                    <p>宾果の茶</p>
                    <p>[北京路商业区]招牌饮品7选1,提供免费WIFI</p>
                    <p class="p-bottom"><span>9.9</span>元&nbsp;&nbsp;门市价:25元</p>
                    <p>已售777</p>
                </div>
            </router-link>
        </div>
        <div class="last-end">
            <div class="login-left">
                <div @click="login">登陆</div>
                <div @click="register">注册</div>
            </div>
            <div class="city-right">
            城市：<div>广州</div>
            </div>
        </div>
        
    </div>
</template>
<script>
    export default{
        methods:{
            myorder(){
                this.$router.push({path:'/myorders'});
            },
            login(){
                this.$router.push({path:'/login'});
            }, 
            register(){
                this.$router.push({path:'/register'});
            }
        }
    }
</script>
<style>
    *{
        margin:0;
        padding:0;
        text-decoration: none;
        list-style: none;
    }
    body{
        background-color: #f0f0f0;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #444;
    }
    .advertisement{
        width:400px;
        height:auto;
    }
    .navbar{
        height:50px;
        width:100%;
        background-color:#06c1ae;
        color:#fff;
    }
    .navbar .nav-wrap-left{
        margin-left:10px;
        float:left;
        line-height:50px;
    }
    .navbar .nav-wrap-left .xdown{
        position:absolute;
        top:15px;
        left:45px;
        transform:rotate(55deg) skew(20deg);
        width:10px;
        height:10px;
        border-right:2px solid #fff;
        border-bottom:2px solid #fff;
    }
    .navbar .nav-search{
        float:left;
        border-radius:3px;
        background-color:rgba(0,0,0,.15);
        border:0;
        height:30px;
        width:255px;
        margin:10px 0 0 30px;
    }
    .navbar .nav-wrap-right{
        font-size:10px;
        float:right;
        position:relative;
    }
    .navbar .nav-wrap-right .myicon{
        width:30px;
        height:23px;
        margin-right:13px;
        margin-top:5px;
        position:relative;
        overflow:hidden;
        margin-bottom:3px;
    }
    .navbar .nav-wrap-right .myicon .topra{
        width:10px;
        height:10px;
        border:2px solid #fff;
        border-radius:50%;
        position:absolute;
        top:3px;
        left:8.5px;
    }
    .navbar .nav-wrap-right .myicon .bottomra{
        width:20px;
        height:20px;
        border:2px solid #fff;
        border-radius:50%;
        position:absolute;
        bottom:-16px;
        left:4px;
    }
    .head{
        height:95px;
        width:100%;
        background-color:#fff;
        padding:13px;
    }
    .head div{
        float:left;
        border-right:1px solid #ddd8ce;
    }
    .head div:first-child{
        padding-left:0px;
        padding-right:20px;
    }
    .head div:nth-child(2){
        padding-right:20px;
        padding-left:20px; 
    }
    .head div:last-child{
        padding-right:0px; 
        border-right:0;
        padding-left:15px; 
    }
    .head div h4{
        margin-bottom:5px;
    }
    .head div img{
        width:62px;
        height:62px;
    }
    .comtitle{
        margin-top:10px;
        height:40px;
        line-height:40px;
        font-size:17px;
        padding-right:250px;
        border-bottom:1px solid #DDD8CE;
        background-color:#fff;

    }
    .content-list{
        height:120px;
        width:100%;
        background-color:#fff;
        padding-top:5px;
        position:relative;
        color:black;
    }
    .content-list img{
        height:120px;
        width:100px;
        float:left;     
    }
    .content-list p{
        margin-top:10px;
        float:left;
    }
    .content-list .p-bottom{
        position:absolute;
        bottom:10px;
        left:105px;
    }
    .content-list .p-bottom span{
        color: #06c1ae;
        font-size:20px;
        margin-left:10px;
        font-weight:900;
        margin-right:5px;
    }

    .content-list p:last-child{
        position:absolute;
        bottom:10px;
        right:7px;
    }
    .last-end{
        margin-top:150px;
        height:50px;
        width:100%;
        margin-bottom:100px;
    }
    .last-end .login-left{
        float:left;
        margin:10px 0 0 10px;
        color:#06c1ae;
    }
    .last-end .login-left div{
        float:left;
        padding: 5px 10px;
        margin-right:10px;
        border:2px solid #06c1ae;       
        border-radius:5px;
    }
    .last-end .city-right{
        float:left;
        margin:10px 10px 0 110px;
        padding-right:70px;
        width:50px;
        height:30px;
        position:relative;
        top:7px;
    }
    .last-end .city-right div{
        position:absolute;
        top:-7px;
        right:5px;
        padding: 5px 20px;
        border:2px solid #06c1ae;
        border-radius:5px;
    }
</style> 